<template>
  <div>
    <!-- 查询条件 -->
    <div class='table-page-search-wrapper'>
      <a-form-model layout='inline' >
        <a-row :gutter='10'>
          <a-col :md='8' :sm='8'>
            <a-form-model-item label='周报开始日期'>
              <a-date-picker v-model='dateRange[0]' disabled  />
            </a-form-model-item>
          </a-col>
          <a-col :md='8' :sm='8'>
            <a-form-model-item label='结束时间'>
              <a-date-picker v-model='dateRange[1]' @change="onChange"/>
            </a-form-model-item>
          </a-col>
          <a-col :md='8' :sm='8'>
            <span style='float: left;overflow: hidden;' class='table-page-search-submitButtons'>
              <a-button type='primary' icon='search' @click='loadData'>查询</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form-model>
    </div>


    <a-table
      rowKey='id'
      ref='table'
      size='middle'
      bordered
      :columns='columns'
      :dataSource='dataSource'
      :pagination='ipagination'
      :loading='loading'
      @change='handleTableChange'
    >
      <span slot='purpose' slot-scope='text, record,index'>
        <span v-if="text.purpose==='98'">咨询类</span>
        <span v-else-if="text.purpose==='01'">建议类</span>
        <span v-else>投诉类</span>
      </span>
      <span slot='dealType' slot-scope='text, record,index'>
        <span v-if="text.dealType==='2'">已答复</span>
        <span v-else>办理中</span>
      </span>
    </a-table>
  </div>
</template>

<script>
import moment from 'moment'
import ReportsEpidemicWeeklyService from '@/myService/ReportsEpidemicWeeklyService'

export default {
  name: 'Step1',
  data() {
    return {
      queryParam: {
        beginDate: '',
        pageIndex: 1,
        pageSize: 30
      },
      /* 数据源 */
      dataSource: [],
      dateRange:[moment((new Date).getTime()-24*60*60*1000*6).format("YYYY-MM-DD"),moment(new Date()).format("YYYY-MM-DD")],
      tags: ['冠状病毒', '疫情'],
      inputVisible: false,
      inputValue: '',
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: (text, row, index) =>
            <span>{this.ipagination.pageSize * (this.ipagination.current - 1) + index + 1}</span>
        },
        {
          title: '信访事项编号',
          dataIndex: 'xfjbh',
          align: 'center',
          ellipsis: true
        },
        {
          title: '信访目的',
          align: 'center',
          dataIndex: 'purpose',
          scopedSlots: { customRender: 'purpose' },
          ellipsis: true
        },
        {
          title: '问题属地',
          align: 'center',
          dataIndex: 'problemTerritory',
          ellipsis: true
        },
        {
          title: '内容分类',
          align: 'center',
          dataIndex: 'contentType',
          ellipsis: true
        },
        {
          title: '当前状态',
          align: 'center',
          dataIndex: 'dealType',
          scopedSlots: { customRender: 'dealType' },
          ellipsis: true
        },
        {
          title: '内容',
          align: 'center',
          dataIndex: 'content',
          ellipsis: true
        },
        {
          title: '姓名',
          align: 'center',
          dataIndex: 'contactName',
          ellipsis: true
        },
        {
          title: '联系电话',
          align: 'center',
          dataIndex: 'contactPhone',
          ellipsis: true
        },
        {
          title: '关键字',
          align: 'center',
          dataIndex: 'keyName',
          ellipsis: true
        }
      ],
      /* table加载状态 */
      loading: false
      // 加载数据方法 必须为 Promise 对象
    }
  },
  mounted() {
    this.queryParam.beginDate=moment((new Date).getTime()-24*60*60*1000*6).format("YYYYMMDD");
    this.loadData()
  },
  methods: {
    moment,
    onChange(val){
      this.dateRange[0]=moment(this.dateRange[1]-24*60*60*1000*6).format("YYYYMMDD");
    },
    loadData() {
      this.loading = true
      this.dataSource=[]
      if(this.dateRange.length>0){
        this.queryParam.beginDate=moment(this.dateRange[0]).format("YYYYMMDD");
      }
      else {
        this.queryParam.beginDate='';
      }
      this.queryParam.pageSize = this.ipagination.pageSize
      this.queryParam.pageIndex = this.ipagination.current
      this.ipagination.total=0
      ReportsEpidemicWeeklyService.getPeriodEpidemicOrder(this.queryParam).then(res=>{
          if (res.success) {
            this.dataSource = res.result.records || res.result
            if (res.result.total) {
              this.ipagination.total = res.result.total
            } else {
              this.ipagination.total = 0
            }
            console.log(this.dataSource)
          } else {
            this.$message.warning(res.message)
          }
      }).finally(() => {
        this.loading = false
      })
    },
    handleTableChange(pagination) {
      this.ipagination.current = pagination.current
      this.ipagination.pageSize = pagination.pageSize
      this.loadData()
    }
  }
}
</script>

<style scoped>

</style>